/* pages/coupon_center/coupon_center.wxss */

.coupon_center {
  min-height: calc(100vh - 0.4224rem);
  .banner {
    img {
      width: 100%;
    }
  }
  .coupon_list {
    padding: rem(30) rem(25);
    .coupon_new_item {
      margin-bottom: rem(16);
      .base_info {
        width: 100%; height: rem(204);
        background: url('https://mjmh.meijiameihuo.com/wechat/images/v2/coupon_item_bg_1.png') no-repeat center;
        background-size: contain;
        @extend .p-clear-float;
        &.base_info_open {
          background: url('https://mjmh.meijiameihuo.com/wechat/images/v2/coupon_item_bg_2.png') no-repeat center;
          background-size: contain;
        }
        .coupon_type {
          width:rem(188); height:rem(204);
          border-radius:rem(10) 0px 0px rem(10);
          color: #fff; float: left;
          background:linear-gradient(131deg,rgba(58,103,238,1) 0%,rgba(146,138,252,1) 100%);
          &.reduction {
            background:linear-gradient(131deg,rgba(58,103,238,1) 0%,rgba(146,138,252,1) 100%);
          }
          &.exchange {
            background:linear-gradient(134deg,rgba(242,127,64,1) 0%,rgba(231,63,68,1) 100%);
          }
          &.open {
            border-radius:rem(10) 0px 0px 0px;
          }
          .money {
            font-size: rem(63);
            padding: rem(40) 0 rem(20); text-align: center;
            height: rem(63);
            text-overflow: ellipsis; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
            em {
              font-size: rem(24);
            }
          }
          p { text-align: center;}
        }
        .coupon_center_info {
          float: left; width: rem(343); margin-left: rem(8); position: relative;
          &:before {
            content: ''; display: block;
            height: rem(153); border-left: 2px dashed #EDEFF2; position: absolute;
            right: 0; top: rem(26);
          }
          .coupon_top {
            border-bottom: 2px dashed #EDEFF2; padding-bottom: rem(35);
            h3 {
              color: #17273A; font-size: rem(25); height: rem(36);
              margin: rem(25) rem(20); overflow: hidden;
              text-overflow: ellipsis; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
            }
            p {
              padding-left: rem(20); color: #999999; font-size: rem(22);
            }
          }
          .coupon_rule_item {
            padding: rem(10) rem(16); font-size: rem(21); color: #666666;
            background-size: rem(15);
            position: relative;
            &:after {
              content: ''; display: block;
              background: url('https://mjmh.meijiameihuo.com/wechat/images/v2/coupon_down.png') no-repeat center;
              background-size: contain; width: rem(24); height: rem(24);
              position: absolute;right: rem(30); top: rem(16);
              -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s;
            }
            &.rate {
              &:after {
                -webkit-transform: rotate(180deg);
              }
            }
          }
        }
        .coupon_right {
          float: right;
          width: rem(160);
          text-align: center;
          .progress {
            margin: 0;
            h4 {
              font-size: rem(20); color: #999999;
            }
            .props {
              width: rem(120); height: rem(8);background:rgba(229,229,229,1); border-radius:rem(15);
              margin: rem(10) auto 0; overflow: hidden;
              span {
                display: block; background:rgba(233,31,63,1);
                height: rem(8); width: 0;
              }
            }
          }
          //正在抢购
          .underway {
            padding: rem(50) 0 rem(30);
            .rush {
              width: rem(116); height: rem(38); line-height: rem(38); text-align: center; color: #E91F3F;
              border: 1px solid #E91F3F; margin:rem(34) auto 0;
              border-radius: rem(30)
            }
          }
          .end {
            padding: rem(77) 0;
            .progress {
              .props {
                background: #CFCFCF;
              }
            }
          }
          .received {
            .status {
              height: rem(103);
              width: 100%; background: url('https://mjmh.meijiameihuo.com/wechat/images/v2/coupon_status_1.png') no-repeat right top;
              background-size: contain;
            }
            .btn {
              width: rem(116); height: rem(38); line-height: rem(38); text-align: center; color: #17273A;
              border: 1px solid #17273A; margin:rem(30) auto 0;
              border-radius: rem(30)
            }
          }
        }
      }
      .coupon_use {
        background: #fff;
        max-height: 0;
        transition: max-height .5s ease; overflow: hidden;
        width: 100%;
        &.open {
          max-height: rem(400);
        }
        .stor_info {
          color: #999; font-size: rem(22);
          padding: rem(16) rem(30)  rem(14); border-bottom: 2px dashed #EDEFF2; border-top: 2px dashed #EDEFF2;
          p {
            &:last-child {
              margin-top: rem(10);
            }
          }
        }
        .coupon_prd_list {
          padding: rem(30);
          h3 {
            font-size: rem(22); color: #999;
            padding: rem(10) 0; font-weight: 400;
          }
          .prdlist {
            @extend .p-clear-float;
            height: rem(120);
            &:-webkit-scrollbar {
              display: none;
            }
            ul {
              overflow: scroll; white-space: nowrap;

              li {
                width:rem(118); height:rem(118); display: inline-block;
                margin-left: rem(13); border-radius: rem(5); overflow: hidden;
                &:first-child {
                  margin-left: 0;
                }
                img {
                  width:rem(118); height:rem(118); object-fit: cover;
                  display: block;
                }
                &.more {
                  background: #f8f8f8;
                  span {
                    width:rem(118); height:rem(118); text-align: center;
                    font-size: rem(24);
                    line-height: rem(118); display: table; color: #999;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.coupon_list {
  padding-top: rem(394);
  padding-bottom: rem(30);
}

.nodata {
  background: #fff;
}

.fixed_tool {
  position: fixed;
  width: rem(120); height: rem(240);
  bottom: rem(285); left: rem(36);
}
.fixed_tool .fixed_item {
  width: rem(120); height: rem(120);
}
.fixed_tool .fixed_item.coupon {
  background: url('https://mjmh.meijiameihuo.com/wechat/images/activity/coupon.png') center no-repeat;
  background-size: contain;
}
.fixed_tool .fixed_item.car {
  background: url('https://mjmh.meijiameihuo.com/wechat/images/activity/buy_car.png') center no-repeat;
  background-size: contain;
}

.coupon_center_page {
  .coupon_item {
    min-height: rem(256);
    background: url('https://mjmh.meijiameihuo.com/wechat/images/home/coupon_center/item_bg.png') center top no-repeat;
    background-size: 100%;
    position: relative;
    margin-bottom: rem(10);
  }
  .coupon_box {
    height: rem(256);
  }
  .coupon_info {
    width: rem(350);
    margin: 0 0 0 rem(10);
    padding: rem(16) 0 rem(18) rem(170);
    position: relative;
  }

  .coupon_item .coupon_info .coupon_info_img {
    display: table;
    position: absolute;
    top: rem(16);
    left: rem(10);
  }

  .coupon_item .coupon_info .coupon_info_img .cpupon_img {
    width: rem(150);
    height: rem(150);
  }

  .coupon_info_txt {
    display: table;
  }

  .coupon_info_txt .coupon_title {
    font-size: rem(30);
    color: #333;
    margin-top: rem(8);
    height: rem(42);
    font-weight: 400;
    line-height: rem(42);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .coupon_info_txt .coupon_time {
    height: rem(34);
    font-size: rem(24);
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: rem(34);
    margin-top: rem(6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .coupon_info_txt .dis_money {
    height: rem(44);
    font-size: rem(28);
    margin-top: rem(12);
    display: flex;
    align-items: center;
  }

  .dis_money .coupon_money {
    font-size: rem(28);
    color: #e91f3f;
    height: rem(44);
    font-weight: 600;
    line-height: rem(44);
  }

  .dis_money .coupon_condition {
    height: rem(44);
    background: rgba(233, 31, 63, 0.08);
    font-size: rem(22);
    padding: 0 rem(10);
    line-height: rem(44);
    color: #e91f3f;
    margin-left: rem(8);
    font-weight: 400;
  }

  .coupon_hr {
    width: rem(464);
    height: rem(4);
    background: #f7f7f7;
    margin-left: rem(12);
  }

  .coupon_rule {
    font-size: rem(24);
    color: #666;
    margin: rem(18) rem(10);
    height: rem(34);
    line-height: rem(34);
    width: rem(460);
    padding-right: rem(50);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    position: relative;
  }

  .coupon_rule .down_icon {
    position: absolute;
    height: rem(50);
    width: rem(50);
    background: url('https://mjmh.meijiameihuo.com/wechat/images/home/icon_down.png') no-repeat center;
    background-size: rem(24);
    top: rem(-5);
    right: 00;
    background-position: center;
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s;
  }

  .coupon_rule .down_icon.show {
    animation: rotating 0.6s;
    transform: rotate(180deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }

  .coupon_stats {
    /* background: red; */
    width: rem(178);
    height: rem(256);
    position: absolute;
    right: 0;
    top: 0;
  }

  .progress {
    margin-top: rem(42);
  }

  .coupon_stats .action {
    height: rem(38);
    background: rgba(233, 31, 63, 1);
    border-radius: rem(4);
    display: table;
    font-size: rem(24);
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: rem(38);
    padding: 0 rem(10);
    margin: rem(14) auto;
    min-width: rem(100);
    text-align: center;
  }

  .coupon_stats .status_box {
    width: rem(118);
    height: rem(118);
    margin: rem(34) auto rem(14);
  }

  .coupon_stats .status_box.over {
    background: url('https://mjmh.meijiameihuo.com/wechat/images/home/coupon_center/over_icon.png') no-repeat center;
    background-size: contain;
  }

  .coupon_stats .status_box.received {
    background: url('https://mjmh.meijiameihuo.com/wechat/images/home/coupon_center/received_icon.png') no-repeat center;
    background-size: contain;
  }

  .coupon_stats .action.received {
    background: #4a90e2;
  }

  .coupon_stats .action.over {
    background: #999;
  }

  .show_coupon_rule {
    font-size: rem(24);
    color: #666;
    background: #fff;
    padding: rem(17) rem(10);
    margin-top: rem(5);
  }

  @keyframes rotating {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(180deg);
    }
  }

}
